.requirement-report-app {
  font-family: HarmonyOS Sans SC;
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
  .app-content-data{
    display: flex;
    flex: 1;
    padding: 20px 10px 20px 0;
    overflow: hidden;
    .app-content-left{
      display: flex;
      flex-direction: column;
      flex: 1;
      background: var(--bg-color11);
      border-radius: 8px;
      overflow: hidden;
      .left-header{
        display: flex;
        align-items: center;
        gap: 20px;
        height: 50px;
        padding: 0 24px;
        border-bottom: 1px solid var(--bd-color6);
        overflow: hidden;
        .label{
          flex: 1;
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--text-color1);
          cursor: pointer;
          font-size: 14px;
          font-weight: 500;
          white-space: nowrap;
          //text-overflow: ellipsis;
          overflow: hidden;
        }
        .model{
          display: flex;
          align-items: center;
          color: var(--text-color1);
          background: var(--bg-color17);
          border: 1px solid var(--bd-color5);
          border-radius: 8px;
          padding: 6px 12px;
          .modelSvg{
            width: 22px;
            height: 22px;
            margin-right: 5px;
          }
          .FilterSvg{
            width: 16px;
            height: 16px;
            margin-left: 20px;
          }
        }
      }
      .dialogues{
        margin: 20px;
        flex: 1;
        flex-direction: column;
        overflow-y: auto;
        &::-webkit-scrollbar{
          width: 0;
          height: 0;
        }
        .ai{
          color: var(--text-color1);
          clear: right;
          font-size: 16px;
          .anticon{
            color: inherit;
            font-size: 20px;
          }
        }
        .dialogue{
          display: flex;
          flex-direction: column;
          gap: 20px;
          margin-bottom: 20px;
          .question{
            display: flex;
            flex-direction: column;
            align-items: end;
            gap: 5px;
            color: var(--text-color1);
            .fileOperate{
              display: flex;
              gap: 10px;
              cursor: pointer;
              border-radius: 6px;
              padding: 8px 12px;
              background: var(--bg-color12);
              border: 1px solid var(--bd-color1);
              .fileCount{
                font-size: 14px;
                font-weight: 500;
                svg{
                  vertical-align: bottom;
                }
              }
            }
            .markdown-content{
              width: fit-content;
              font-size: 16px;
              padding: 12px 14px;
              background: var(--bg-color18);
              border-radius: 8px;
            }
          }
          .answer{
            width: fit-content;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            color: var(--text-color1);
            padding: 12px 14px;
            font-size: 16px;
            background: var(--bg-color19);
            border-radius: 8px;
            overflow: hidden;
            .operate{
              display: flex;
              justify-content: flex-end;
              gap: 10px;
              padding-top: 10px;
              border-top: 1px solid var(--bd-color12);
              .duration{
                margin-right: auto;
              }
              svg{
                cursor: pointer;
                &:hover{
                  background: var(--bg-color13);
                }
              }
            }
          }
        }
      }
      .addFlow{
        width: fit-content;
        align-self: end;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        padding: 8px 18px;
        margin-right: 20px;
        background: #4C3BDC;
        border-radius: 4px;
      }
      .inputDiv{
        border-radius: 16px;
        border: 1px solid #8B81FF;
        margin: 20px;
        background: var(--bg-color9);
        .inputFileCascader{
          display: block;
          height: 0;
          overflow: hidden;
        }
        .input{
          display: flex;
          gap: 10px;
          padding: 20px;
          flex-direction: column;
          textarea{
            color: var(--text-color2);
            font-size: 16px;
            resize: none;
            border: none;
            background-color: transparent;
            &::placeholder{
              color: var(--text-color2);
            }
            &::-webkit-scrollbar{
              width: 0;
              height: 0;
            }
          }
          textarea:focus{
            box-shadow: none;
          }
          .operate {
            display: flex;
            justify-content: space-between;
            .link {
              color: var(--text-color1);
              display: flex;
              gap: 10px;
              align-items: center;
              svg{
                cursor: pointer;
              }
            }
            .send{
              cursor: not-allowed;
              color: #5036B1;
            }
            .sendActive{
              cursor: pointer;
              color: #3461E2;
            }
          }
        }
      }
    }
    #drag{
      cursor: col-resize;
      width: 10px;
      height: 100%;
    }
    .app-content-right{
      width: 1120px;
      display: flex;
      flex-direction: column;
      background: var(--bg-color11);
      border-radius: 8px;
      overflow: hidden;
      .right-header{
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: space-between;
        height: 50px;
        padding: 0 24px;
        border-bottom: 1px solid var(--bd-color6);
        overflow: hidden;
        .label{
          flex: 1;
          color: var(--text-color1);
          font-size: 14px;
          font-weight: 500;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .right-content{
        flex: 1;
        padding: 25px 50px;
        overflow: auto;
        &::-webkit-scrollbar{
          width: 0;
          height: 0;
        }
      }
    }
    .app-content-flow{
      display: flex;
      flex-direction: column;
      flex: 1;
      background: var(--bg-color11);
      border-radius: 8px;
      overflow: hidden;
      .content-flow-header{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 24px;
        border-bottom: 1px solid var(--bd-color6);
        .label{
          flex: 1;
          color: var(--text-color1);
          font-size: 16px;
          font-weight: 500;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .add{
          color: #FFFFFF;
          cursor: pointer;
          padding: 5px 18px;
          background: #4C3BDC;
          border-radius: 4px;
        }
        .aiAdd{
          position: absolute;
          right: 24px;
          top: 65px;
          color: var(--text-color1);
          cursor: pointer;
          display: flex;
          align-items: center;
          padding: 5px 18px;
          gap: 4px;
          background: linear-gradient(106deg, #38B9FF 1%, #397EF6 57%, #907CFF 104%);
          border-radius: 4px;
          z-index: 5;
        }
      }
    }
  }
  .createProgress{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    .createProgressBox{
      display: flex;
      flex-direction: column;
      align-items: center;
      .label{
        margin-top: 24px;
        margin-bottom: 20px;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
}
